<template>
  <div>
    <div>
      <!-- input输入框 -->
      <el-input
        size="small"
        class="addPosInput"
        placeholder="添加职位..."
        prefix-icon="el-icon-plus"
        @keydown.enter.native="addPosition"
        v-model="pos.name"
      >
      </el-input>
      <el-button
        icon="el-icon-plus"
        size="small"
        type="primary"
        @click="addPosition"
        >添加</el-button
      >
    </div>
    <div class="posManaMain">
      <!-- stripe斑马纹  selection-change事件，通过这个事件获取勾选的对象 通过该事件可以把对应的数据传输给批量删除的事件-->
      <el-table 
      :data="positions" 
      @selection-change="handleSelectionChange"
      border
      stripe 
      size="small" 
      style="width: 70%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="编号" width="55"> </el-table-column>
        <el-table-column prop="name" label="职位名称" width="120">
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间"> </el-table-column>
        <!-- <el-table-column prop="enabled" label="是否启用" width="120"></el-table-column> -->
        <el-table-column label="操作">
          <!-- element-ui自定义模板 -->
          <template slot-scope="scope">
            <!-- 三个参数 scope范围,index这一行的索引下标，scope.row这一行的json数据 -->
            <el-button size="mini" @click="showEditView(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- disabled表示禁用的意思  禁用启用--判断选中multipleSelection数组的长度，0表示没选用我就禁用，大于0-启用-->
      <el-button type="danger" size="small" style="margin-top: 8px" :disabled="multipleSelection.length==0"
        @click="deleteMany">批量删除
      </el-button>
    </div>
    <!-- dialog对话框  dialogVisible布尔类型，如果是true则弹出-->
    <el-dialog
      title="编辑职位"
      :visible.sync="dialogVisible" 
      width="30%">
    <div>
      <el-tag>职位名称</el-tag>
      <el-input v-model="updatePos.name" size="small" class="updatePosInput"></el-input>
    </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PosMana",
  data() {
    return {
      // 这里面的对象和属性都是给后端传的，不需要传的字段如id,本身包含，不必写在里面
      pos: {
        name: "", // 看接口 真正传给后端的只有name
      },
      positions: [],
      dialogVisible: false, // 先默认是false
      updatePos: {
        name: ''
      },
      multipleSelection: []
    }
  },
  mounted() {
    // 页面初始化加载的数据放在mounted里面
    this.initPositions(); // 调用初始化职位方法
  },
  methods: {
    handleSelectionChange(val){ // 获取到勾选的值val,获取之后再做处理 批量按钮的启用禁用，调用批量删除接口传对应的id
      this.multipleSelection = val;
    },  
    deleteMany() {
       this.$confirm('此操作将永久删除【'+this.multipleSelection.length+ // multipleSelection里面的数组长度
       '】条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = '?'; // 不是单纯的传id而是传一个id数组  定义ids
          this.multipleSelection.forEach(item => { //循环
             ids += "ids=" + item.id + "&"; // &拼接？
          })
          this.deleteRequest('/system/basic/pos/'+ ids).then(resp =>{
            if (resp) {
              this.initPositions();
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    addPosition() {
      // 需要传整个position对象 不可以单单传name
      if (this.pos.name) {
        // 判断是不是存在
        this.postRequest("/system/basic/pos/", this.pos).then((resp) => {
          // this.pos表示传pos对象，传递给后端的参数
          if (resp) {
            this.initPositions(); // 添加完后刷新表格=初始化菜单
            this.pos.name = ""; // 小bug添加完后信息还在的bug的解决
          }
        });
      } else {
        this.$message.error("职位不可以为空!"); //message提示信息
      }
    },
    // 要传一个id，但是id在data里面所有就不需要传，data包含了整个查询到的数据
    showEditView(index, data) { // 编辑方法
      // this.updatePos=data; // 点击编辑按钮后 编辑框内显示信息 但是直接赋值会有同步的bug所以抛弃
      // 直接赋值又同步bug 所以用数据的拷贝
      Object.assign(this.updatePos,data);// 此时复制其实id等这些信息已经传进去到了updatePos里面了
      this.updatePos.createDate = ''; // 小bug 所以设置为空，创建日期要传到后端，只是后端不接受而已 
      this.dialogVisible = true; // 弹出编辑框
    }, 
    handleDelete(index, data) {
      // 删除方法
      // messagebox弹窗 确认信息
      this.$confirm(
        // 注意 data 已经传进来了(index,data) 所以不能用this.data.name
        "此操作将永久删除【" + data.name + "】职位,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 确认删除的话，调删除的接口
          this.deleteRequest("/system/basic/pos/" + data.id).then((resp) => {
            // 传id到后端
            if (resp) {
              this.initPositions();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    doUpdate() {
      this.postRequest('/system/basic/pos/',this.updatePos).then(resp =>{
        if(resp){
          this.initPositions();
          this.updatePos.name='';
          this.dialogVisible = false;
        }
      })
    },
    initPositions() {
      // 调用后端接口的方法
      this.getRequest("/system/basic/pos/").then((resp) => {
        if (resp) {
          this.positions = resp; // 数据放到positions里面
        }
      });
    },
  },
};
</script>

<style scoped>
.addPosInput {
  width: 300px;
  margin-right: 8px;
}
.posManaMain {
  margin-top: 10px;
}
.updatePosInput{
  width: 200px;
  margin-left: 8px;
}
</style>
